<template>
  <div class="page-content">
    <div class="page-hasTree">
      <div class="page-tree">
        <el-card class="card100">
          <div slot="header" class="clearfix">
            <el-input v-model="searchData" placeholder="请输入" style="width:190px;">
              <!-- <i slot="suffix" class="el-input__icon el-icon-search" /> -->
            </el-input>
            <el-button type="primary" plain style="float: right; padding: 10px" icon="el-icon-refresh-right" @click="resetTree" />
          </div>
          <div class="tree-scroll">
            <el-tree
              ref="tree"
              :data="treeData"
              show-checkbox
              node-key="id"
              :default-expanded-keys="[2, 3]"
              :default-checked-keys="[5]"
              :props="defaultProps"
              :filter-node-method="filterNode"
            >
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <span>{{ node.label }}</span>
                <span style="margin-left:10px;">
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-plus"
                    style="padding: 5px"
                    @click="() => addTree(data)"
                  />
                  <el-button
                    type="danger"
                    size="mini"
                    icon="el-icon-delete"
                    style="padding: 5px"
                    @click="() => removeTree(node, data)"
                  />
                </span>
              </span>
            </el-tree>
          </div>
        </el-card>
      </div>
      <div class="page-hasTree-content">
        <el-card>
          <el-form ref="ruleForm" label-width="100px" :inline="true" :model="formData" :rules="rules">
            <el-row :gutter="15">
              <el-col :span="19">
                <el-form-item label="名称" prop="name">
                  <el-input v-model="formData.name" placeholder="请输入名称" />
                </el-form-item>
                <el-form-item label="计划开始时间" prop="date2">
                  <el-date-picker v-model="formData.date1" type="date" placeholder="选择日期" />
                </el-form-item>
                <el-form-item label="实际审计时间" prop="date2">
                  <el-date-picker v-model="formData.date2" type="date" placeholder="选择日期" />
                </el-form-item>
                <el-form-item label="检查分数">
                  <el-input v-model="formData.name1" placeholder="检查分数" />
                </el-form-item>
                <el-form-item label="关联版本">
                  <el-select v-model="formData.region" placeholder="活动区域">
                    <el-option label="区域一" value="shanghai" />
                    <el-option label="区域二" value="beijing" />
                  </el-select>
                </el-form-item>
                <el-form-item label="检查评级">
                  <el-select v-model="formData.region1" placeholder="活动区域">
                    <el-option label="区域一" value="shanghai" />
                    <el-option label="区域二" value="beijing" />
                  </el-select>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="formData.region1" placeholder="活动区域">
                    <el-option label="区域一" value="shanghai" />
                    <el-option label="区域二" value="beijing" />
                  </el-select>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="formData.region" placeholder="活动区域">
                    <el-option label="区域一" value="shanghai" />
                    <el-option label="区域二" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item style="float: right">
                  <el-button icon="el-icon-refresh-right" @click="formReset">重置</el-button>
                  <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-divider />
          <div>
            <div class="right-align mb15"><el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">新增</el-button></div>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
              />
              <el-table-column
                prop="date"
                label="日期"
              />
              <el-table-column
                prop="name"
                label="姓名"
              />
              <el-table-column
                prop="address"
                label="地址"
              />
              <el-table-column
                label="状态"
                width="180"
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.$index%2===0" type="success">已整改</el-tag>
                  <el-tag v-else type="warning">待整改</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="280">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleView(scope.$index, scope.row)"
                  >查看</el-button>
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button>
                  <el-popconfirm
                    class="ml10"
                    title="确定删除？"
                    @confirm="handleDelete(scope.$index, scope.row)"
                  >
                    <el-button
                      slot="reference"
                      size="mini"
                      type="danger"
                    >删除</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
            <div class="self-pagination">
              <el-pagination
                :current-page.sync="currentPage"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[10, 20, 30, 40]"
                :total="100"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="新增"
      :visible.sync="addDialogVisible"
      width="600"
    >
      <el-form ref="ruleForm" label-width="100px" inline :model="addFormData" :rules="addRules">
        <el-form-item label="名称" prop="name">
          <el-input v-model="addFormData.name" placeholder="请输入名称" style="width:200px;" />
        </el-form-item>
        <el-form-item label="关联版本">
          <el-select v-model="addFormData.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="计划开始时间" prop="date2">
          <el-date-picker v-model="addFormData.date1" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="实际审计时间" prop="date2">
          <el-date-picker v-model="addFormData.date2" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="检查分数">
          <el-input v-model="addFormData.name" placeholder="检查分数" style="width:200px;" />
        </el-form-item>
        <el-form-item label="检查评级">
          <el-select v-model="addFormData.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="addFormData.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formData.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { getInfo } from '@/api/user' 接口引入
export default {
  name: 'Home',
  components: {
  },
  data() {
    return {
      formData: {
        name: '',
        region: '',
        date1: '',
        date2: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      addFormData: {
        name: '',
        region: '',
        date1: '',
        date2: ''
      },
      addRules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      multipleSelection: [],
      dialogVisible: false,
      currentPage: 1,
      addDialogVisible: false,
      searchData: '', // 左侧tree搜索
      treeData: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  computed: {

  },
  watch: {
    searchData(val) { // 监听筛选字段
      this.$refs.tree.filter(val)
    }
  },
  created() {

  },
  methods: {
    handleSelectionChange(val) { // 表格多选
      this.multipleSelection = val
    },
    handleAdd() { // 新增
      this.addDialogVisible = true
    },
    handleView(index, row) { // 查看
      this.dialogVisible = true
      console.log(index, row)
    },
    handleEdit(index, row) { // 编辑
      this.addDialogVisible = true
      console.log(index, row)
    },
    handleDelete(index, row) { // 删除
      console.log(index, row)
    },
    handleSizeChange(val) { // 分页中每页条数改变触发
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) { // 切换分页
      this.currentPage = val
      console.log(`当前页: ${val}`)
    },
    search() { // 搜索
      console.log(this.formData)
    },
    formReset() {
      this.$refs.ruleForm.resetFields()
    },
    filterNode(value, data) { // 筛选
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    addTree() { // 新增tree

    },
    removeTree() { // 删除tree

    },
    resetTree() {
      this.searchData = ''
    }
  }
}
</script>
